<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>统计 - 记账应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/main.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body class="bg-gray-100">
    <!-- 引入状态栏组件 -->
    <div id="status-bar-container"></div>

    <!-- 主要内容区域 -->
    <div class="pb-24">
        <!-- 头部月份选择 -->
        <div class="bg-white p-4 sticky top-0 z-8">
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <h1 class="text-xl font-bold">数据统计</h1>
                    <div class="ml-3 flex items-center bg-gray-100 px-3 py-1 rounded-full">
                        <span class="text-gray-800">2023年5月</span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1">
                            <polyline points="6 9 12 15 18 9"></polyline>
                        </svg>
                    </div>
                </div>
            </div>

            <!-- 支出/收入切换 -->
            <div class="flex mt-4">
                <button class="flex-1 py-2 text-center font-medium text-white bg-blue-500 rounded-l-lg" id="expense-tab">支出</button>
                <button class="flex-1 py-2 text-center font-medium text-gray-500 bg-gray-100 rounded-r-lg" id="income-tab">收入</button>
            </div>
        </div>

        <!-- 总计卡片 -->
        <div class="bg-white mt-2 p-4">
            <div class="flex justify-between items-center">
                <div>
                    <div class="text-gray-500 text-sm">本月支出</div>
                    <div class="text-2xl font-bold mt-1">¥8,320.50</div>
                </div>
                <div>
                    <div class="text-gray-500 text-sm text-right">预算剩余</div>
                    <div class="text-xl font-medium text-blue-500 mt-1">¥6,679.50</div>
                </div>
            </div>
        </div>

        <!-- 饼图统计 -->
        <div class="chart-container mt-4">
            <div class="flex justify-between items-center mb-4">
                <div class="chart-title">支出分类</div>
                <div class="text-sm text-blue-500">查看详情</div>
            </div>
            <div style="height: 240px; position: relative;" class="flex justify-center">
                <div class="w-3/4">
                    <canvas id="expensePieChart"></canvas>
                </div>
            </div>
        </div>

        <!-- 分类明细 -->
        <div class="card mt-4">
            <div class="card-header">
                <div class="font-medium">分类明细</div>
                <div class="text-sm text-gray-500">点击查看详情</div>
            </div>
            <div class="divide-y">
                <div class="flex items-center p-4">
                    <div class="bill-icon bg-red-100 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f87171" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17 11V3h-2v2H9V3H7v8h2V9h6v2h2zm-6 2v2h2v-2h-2z" />
                            <rect x="4" y="19" width="16" height="2" rx="1" />
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <div class="font-medium">餐饮</div>
                            <div class="font-medium">¥2,450.00</div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <div class="text-sm text-gray-500">占比29.4%</div>
                            <div class="text-sm text-gray-500">共28笔</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                            <div class="bg-red-500 h-1.5 rounded-full" style="width: 29.4%"></div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center p-4">
                    <div class="bill-icon bg-blue-100 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect>
                            <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <div class="font-medium">购物</div>
                            <div class="font-medium">¥1,980.50</div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <div class="text-sm text-gray-500">占比23.8%</div>
                            <div class="text-sm text-gray-500">共15笔</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                            <div class="bg-blue-500 h-1.5 rounded-full" style="width: 23.8%"></div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center p-4">
                    <div class="bill-icon bg-yellow-100 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#eab308" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <polygon points="12 2 19 21 12 17 5 21 12 2"></polygon>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <div class="font-medium">交通</div>
                            <div class="font-medium">¥1,250.00</div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <div class="text-sm text-gray-500">占比15.0%</div>
                            <div class="text-sm text-gray-500">共22笔</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                            <div class="bg-yellow-500 h-1.5 rounded-full" style="width: 15.0%"></div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center p-4">
                    <div class="bill-icon bg-green-100 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
                            <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <div class="font-medium">娱乐</div>
                            <div class="font-medium">¥980.00</div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <div class="text-sm text-gray-500">占比11.8%</div>
                            <div class="text-sm text-gray-500">共8笔</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                            <div class="bg-green-500 h-1.5 rounded-full" style="width: 11.8%"></div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center p-4">
                    <div class="bill-icon bg-purple-100 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20.42 4.58a5.4 5.4 0 0 0-7.65 0l-.77.78-.77-.78a5.4 5.4 0 0 0-7.65 0C1.46 6.7 1.33 10.28 4 13l8 8 8-8c2.67-2.72 2.54-6.3.42-8.42z"></path>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <div class="font-medium">医疗健康</div>
                            <div class="font-medium">¥860.00</div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <div class="text-sm text-gray-500">占比10.3%</div>
                            <div class="text-sm text-gray-500">共5笔</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                            <div class="bg-purple-500 h-1.5 rounded-full" style="width: 10.3%"></div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center p-4">
                    <div class="bill-icon bg-gray-100 mr-3">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="12" cy="12" r="10"></circle>
                            <line x1="12" y1="8" x2="12" y2="12"></line>
                            <line x1="12" y1="16" x2="12.01" y2="16"></line>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <div class="flex justify-between">
                            <div class="font-medium">其他</div>
                            <div class="font-medium">¥800.00</div>
                        </div>
                        <div class="flex justify-between mt-1">
                            <div class="text-sm text-gray-500">占比9.7%</div>
                            <div class="text-sm text-gray-500">共10笔</div>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-1.5 mt-2">
                            <div class="bg-gray-500 h-1.5 rounded-full" style="width: 9.7%"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 趋势图 -->
        <div class="chart-container mt-4">
            <div class="flex justify-between items-center mb-4">
                <div class="chart-title">支出趋势</div>
                <div class="text-sm">
                    <span class="text-blue-500 border-b border-blue-500 pb-1">周</span>
                    <span class="text-gray-400 ml-3">月</span>
                    <span class="text-gray-400 ml-3">年</span>
                </div>
            </div>
            <div style="height: 200px; position: relative;">
                <canvas id="expenseTrendChart"></canvas>
            </div>
        </div>
    </div>

    <div class="bottom-nav">
      <a href="home.html" class="nav-item" id="nav-home">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
                  <polyline points="9 22 9 12 15 12 15 22"></polyline>
              </svg>
          </div>
          <div>首页</div>
      </a>
      <a href="bills.html" class="nav-item" id="nav-bills">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                  <line x1="16" y1="2" x2="16" y2="6"></line>
                  <line x1="8" y1="2" x2="8" y2="6"></line>
                  <line x1="3" y1="10" x2="21" y2="10"></line>
              </svg>
          </div>
          <div>账单</div>
      </a>
  
      <a href="quick-entry.html" class="nav-item" id="nav-quick-entry">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10"></circle>
                  <line x1="12" y1="8" x2="12" y2="16"></line>
                  <line x1="8" y1="12" x2="16" y2="12"></line>
              </svg>
          </div>
          <div>记账</div>
      </a>
      <a href="statistics.html" class="nav-item" id="nav-statistics">
        <div class="nav-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="18" y1="20" x2="18" y2="10"></line>
                <line x1="12" y1="20" x2="12" y2="4"></line>
                <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
        </div>
        <div>统计</div>
    </a>
      <a href="settings.html" class="nav-item" id="nav-settings">
          <div class="nav-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="3"></circle>
                  <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
              </svg>
          </div>
          <div>设置</div>
      </a>
  </div>

    <script>
        // 加载状态栏和底部导航组件
        fetch('../components/statusbar.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('status-bar-container').innerHTML = html;
            });
            
        fetch('../components/tabbar.html')
            .then(response => response.text())
            .then(html => {
                document.getElementById('tab-bar-container').innerHTML = html;
            });
            
        // 支出/收入切换
        document.getElementById('expense-tab').addEventListener('click', function() {
            this.classList.remove('bg-gray-100', 'text-gray-500');
            this.classList.add('bg-blue-500', 'text-white');
            document.getElementById('income-tab').classList.remove('bg-blue-500', 'text-white');
            document.getElementById('income-tab').classList.add('bg-gray-100', 'text-gray-500');
        });
        
        document.getElementById('income-tab').addEventListener('click', function() {
            this.classList.remove('bg-gray-100', 'text-gray-500');
            this.classList.add('bg-blue-500', 'text-white');
            document.getElementById('expense-tab').classList.remove('bg-blue-500', 'text-white');
            document.getElementById('expense-tab').classList.add('bg-gray-100', 'text-gray-500');
        });
        
        // 图表
        document.addEventListener('DOMContentLoaded', function() {
            // 饼图
            const pieCtx = document.getElementById('expensePieChart').getContext('2d');
            const pieChart = new Chart(pieCtx, {
                type: 'doughnut',
                data: {
                    labels: ['餐饮', '购物', '交通', '娱乐', '医疗健康', '其他'],
                    datasets: [{
                        data: [29.4, 23.8, 15.0, 11.8, 10.3, 9.7],
                        backgroundColor: [
                            '#ef4444',
                            '#3b82f6',
                            '#eab308',
                            '#10b981',
                            '#8b5cf6',
                            '#6b7280'
                        ],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20
                            }
                        }
                    },
                    cutout: '70%',
                    animation: {
                        onComplete: function() {
                            // 防止动画完成后图表尺寸变化
                            this.resize();
                        }
                    }
                }
            });
            
            // 趋势图
            const trendCtx = document.getElementById('expenseTrendChart').getContext('2d');
            const trendChart = new Chart(trendCtx, {
                type: 'bar',
                data: {
                    labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    datasets: [{
                        label: '支出金额',
                        data: [520, 480, 390, 530, 650, 830, 720],
                        backgroundColor: '#3b82f6',
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    },
                    animation: {
                        onComplete: function() {
                            // 防止动画完成后图表尺寸变化
                            this.resize();
                        }
                    }
                }
            });
        });
    </script>
</body>
</html> 
